<template>
	<view class="class_main_index u-m-b-24" @click="toDetail">
		<view class="title u-line-1">
			{{ course.title }}
		</view>
		<view class="f-s-12 u-m-t-12 u-m-b-20 u-tips-color">
			面向{{ course.classFor }}
		</view>
		<view class="u-flex u-flex-between u-flex-items-center">
			<teacher-icon-label :teacher="course.teacher" />
			<tag :text="course.domain?.name" :right="0" color="#3D8FFF" background="#EBF1FF" :radius="12"></tag>
		</view>
		<up-line margin="12px 0" color="#0000000f"></up-line>
		<view class=" u-light-color u-flex u-flex-between u-flex-items-center">
			<up-icon name="clock" :label="course.time" :labelSize="12" :size="12" color="#c0c4cc"
				labelColor="#c0c4cc"></up-icon>
			<up-icon name="map" :label="course.teacher.city" :labelSize="12" :size="12" color="#c0c4cc"
				labelColor="#c0c4cc"></up-icon>
		</view>

	</view>
</template>

<script setup>
	import tag from "@/components/common/tag.vue"
	import teacherIconLabel from "@/components/common/teacher-icon-label.vue"

	import {
		defineProps
	} from 'vue';

	const props = defineProps({
		course: Object
	})

	function toDetail() {
		uni.navigateTo({
			url: '/subPackages/class/main_detail?id=' + props.course.id
		})
	}
</script>

<style lang="scss" scoped>
	.class_main_index {
		padding: 16px;
		margin-bottom: 12px;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.06);
		border-radius: 24rpx;

		.title {
			font-size: 16px;
			font-weight: bolder;
		}

		.sub-title {
			color: #888;
			font-size: 12px;
		}
	}
</style>